<template>
  <div class="card home">
    <motion.div
      :initial="{ opacity: 0, y: 20 }"
      :animate="{ opacity: 1, y: 0 }"
      :transition="{ duration: 1 }"
    >
      <h1 class="title">
        <img width="52" style="margin-top: 10px;" src="@/assets/images/icon-logo.png" alt="" />
        <span class="text">白色笔记</span>
      </h1>
      <p class="desc">
        <img class="middle" width="36" src="@/assets/images/ai.png" alt=""><span class="middle"> 医疗科研协助平台</span>
      </p>
      <div class="search-box">
        <el-input
          v-model="search"
          placeholder="请输入文字"
          class="search"
          @input="changeSearch"
          @keyup.enter="onSearch"
        >
          <template #append>
            <motion.div
            :whileHover="{ scale: 1.2 }"
            :transition="{ duration: 0.2 }"
            >
              <el-button @click="onSearch">
                <el-icon>
                  <Search />
                </el-icon>
              </el-button>
            </motion.div>
          </template>
        </el-input>
        <div class="info">
          <img class="img" src="@/assets/images/search.png" alt="">
          <p class="name">AI医疗科研协助平台</p>
          <p class="msg">医学影像大数据专属云存储与云计算平台 ◆ 全流程AI赋能医学研究,零编程基础轻松进入医工交叉领域 ◆ 一站式提供医学影像大数据的存储、共享、脱敏、转换、显示等云存储功能 ◆ 数据标准化...</p>
        </div>
      </div>
    </motion.div>
    <List ref="listRef" />
  </div>
</template>
<script setup>
import { motion } from "motion-v"
import eventBus from '@/utils/eventBus'
import { onMounted, onUpdated, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import List from './components/List.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const search = ref('')
const lastSearch = ref('')
const listRef = ref(null)
defineOptions({
  name: 'Home'
})

onMounted(() => {
  eventBus.on('changeSearch', value => {
    search.value = value
  })
  eventBus.on('onSearch', () => {
    onSearch()
  })
})
onUpdated(() => {
  if(route.query.search && lastSearch.value !== route.query.search) {
    search.value = route.query.search
    eventBus.emit('changeSearch', search.value)
    onSearch()
    lastSearch.value = route.query.search
  }
})
// 输入搜索内容
const changeSearch = () => {
  eventBus.emit('changeSearch', search.value)
}
const onSearch = () => {
  listRef.value.getList('search',search.value)
}
</script>

<style lang="scss" scoped>
.home{
  text-align: center;
  padding-top: 30px;
  .title{
    color: #333;
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    .text{
      font-family: serif;
      color: #1a2233;
      font-size: max(2.6vw, 40px);
      letter-spacing: 2px;
      text-shadow:
        2px 2px 0 #222c3a,
        4px 4px 8px rgba(30,40,60,0.5);
      line-height: 1.1;
      display: inline-block;
    }
  }
  .desc{
    font-size: max(1.8vw, 30px);
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 20px;
  }
  .search-box{
    width: 60%;
    min-width: 900px;
    margin: 40px auto;
    .search{
      height: 55px;
      :deep(.el-input__wrapper){
        font-size: 16px;
        padding: 1px 20px;
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
      }
      :deep(.el-input-group__append){
        height: 57px;
        margin-top: -1px;
        background-image: linear-gradient(139deg,  #2462F1 60%, #3C2CDC 100%);
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        .el-button{
          padding: 2px 28px;
          border: none;
          .el-icon{
            font-size: 28px;
            color: #fff;
          }
        }
      }
    }
    .info{
      background: #F2F4F7;
      margin-top: 50px;
      border: 1px solid rgba(234,236,239,1);
      border-radius: 8px;
      position: relative;
      padding: 15px;
      .img{
        position: absolute;
        left: 15px;
        top: -8px;
        width: 160px;
      }
      .name{
        text-align: left;
        margin-left: 140px;
        color: #333;
        font-size: 22px;
      }
      .msg{
        text-align: left;
        margin: 5px 0 0 140px;
        font-size: 14px;
        color: #333333;
        line-height: 24px;
      }
    }
  }
}
</style>